<script setup>

    import {ref, toRefs} from 'vue'
    import payApi from '@/api/order/pay'
    import orderApi from '@/api/order/order'
    import {showConfirmDialog, showNotify} from 'vant'

    const props = defineProps({
        order: Object,
    })

    const {order} = toRefs(props)

    const handleDelete = () => {
        showConfirmDialog({
            message:
                '确实删除该订单吗？',
        }).then(() => {
            // on confirm
            orderApi.deleteById(order.value.id).then(response => {
                showNotify({ type: 'primary', message: '删除成功' })
                order.value.orderStatus = -1
                order.value.orderStatusStr = '已删除'
            })
        }).catch(() => {
            // on cancel
        })
    }

    const handleCancel = () => {
        showConfirmDialog({
            message:
                '确实取消该订单吗？',
        }).then(() => {
            // on confirm
            orderApi.cancelOrderById(order.value.id).then(response => {
                showNotify({ type: 'primary', message: '取消成功' })
                order.value.orderStatus = 4
                order.value.orderStatusStr = '已取消'
            })
        }).catch(() => {
            // on cancel
        })
    }

    const payForm = ref(null)
    const handlePay = () => {
        payApi.orderPayByOrderSn(order.value.sn).then(response => {
            payForm.value.innerHTML = response.data
            payForm.value.children[0].submit()
        })
    }

    const handleConfirm = () => {
        showConfirmDialog({
            message:
                '确实已收到货了吗？',
        }).then(() => {
            // on confirm
            orderApi.confirmOrderById(order.value.id).then(response => {
                showNotify({ type: 'primary', message: '收货成功' })
                order.value.orderStatus = 3
                order.value.orderStatusStr = '待评论'
            })
        }).catch(() => {
            // on cancel
        })
    }

</script>

<template>
    <div class="order_btn">
        <!--订单状态：0->待付款；1->待发货；2->待收货；3-已完成；4->已取消；5-申请退款，6->已退款，7->退款失败-->
        <!--删除订单的状态：3-已完成；4->已取消；6->已退款，7->退款失败-->
        <van-button size="small" @click="handleDelete" v-if="[3,4,6,7].includes(order.orderStatus)">删除订单</van-button>
        <!--申请退款的状态：1->待发货；2->待收货；3-已完成-->
        <van-button size="small" @click="$router.push('/order/refund?id=' + order.id)" v-if="[1,2,3].includes(order.orderStatus)">申请退款</van-button>
        <!--取消订单的状态：0->待付款-->
        <van-button size="small" @click="handleCancel" v-if="[0].includes(order.orderStatus)">取消订单</van-button>
        <!--马上支付的状态：0->待付款-->
        <van-button size="small" @click="handlePay" type="primary" v-if="[0].includes(order.orderStatus)">马上支付</van-button>
        <!--查看物流的状态：2->待收货；3-已完成-->
        <van-button size="small" @click="$router.push('/order/deliveryInfo?id=' + order.id)" v-if="[2,3].includes(order.orderStatus)">查看物流</van-button>
        <!--确认收货的状态：2->待收货-->
        <van-button size="small" @click="handleConfirm" type="primary" v-if="[2].includes(order.orderStatus)">确认收货</van-button>
    </div>
    <div ref="payForm">

    </div>
</template>

<style lang="scss" scoped>
    .order_btn {
        text-align: right;
        padding: 8px;

        .van-button {
            margin-left: 10px;
        }
    }
</style>
